<template>
  <div class="Detail">
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="content_order">
      <van-card
        v-for="details in orderDetails.orderLines"
        :key="details.id"
        :price="details == null ? 0 : details.price"
        :num="details.number"
        :title="details.product.name"
        :desc="details.product.description"
        :thumb="details.product.photo"
      >
        <template #tags> </template>
      </van-card>
    </div>

    <div class="detail-order">
      <span
        >服务地址:
        {{
          orderDetails.address.province +
          orderDetails.address.city +
          orderDetails.address.area +
          orderDetails.address.address
        }}</span
      ><br />
      <br /><span
        >下单时间:
        {{ moment(orderDetails.orderTime).format("YYYY-MM-DD HH:mm:ss") }}</span
      ><br />
      <br />
      <span
        >服务时间:
        {{
          moment(orderDetails.serviceTime).format("YYYY-MM-DD HH:mm:ss")
        }}</span
      >
      <br />
      <br />

      <span
        >联系方式:
        {{
          orderDetails.customer.username +
          "(" +
          orderDetails.customer.telephone +
          ")"
        }}</span
      >
      <br />
      <br />
      <span style="float: right"> {{ orderDetails.status }}</span>
    </div>
    <div class="total">
      总计: <span style="color: red">￥{{ orderDetails.total }}</span>
    </div>
  </div>
</template>

<script>
let moment = require("moment");
// 引入vuex的辅助函数
import { get } from "@/http/axios";
export default {
  data() {
    return {
      orderDetails: [],
    };
  },
  methods: {
    moment,
    onClickLeft() {
      this.$router.back();
    },
    async queryDetails() {
      let id = this.$route.query.id;
      let res = await get("/order/findById", { id });
      this.orderDetails = res.data.data;
    },
  },
  created() {
    // 自动获取订单数据
    this.queryDetails();
  },
  computed: {},
};
</script>

<style scoped>
.van-nav-bar {
  background-image: linear-gradient(
    -225deg,
    #d9afd9
    #97d9e1
  );
}
.total {
  float: right;
}
.content_order {
  margin-top: 10px;
}
.van-card {
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 10px;
  width: 95%;
  box-shadow: 2px 1px 2px 2px #d9afd9;
}
.detail-order {
  margin-top: 50px;
  width: 100%;
  height: 180px;
  /* background-color: #dad8da; */
  font-size: 15px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 25px;
  width: 95%;
  box-shadow: 0px 0px 8px 1px #d9afd9;
}
.total {
  float: right;
  margin-top: 30px;
}
::v-deep .van-nav-bar__title {
  font-size: 20px;
  color: white;
  font-family: 楷体;
}
::v-deep .van-nav-bar__left-text {
  font-size: 20px;
  color: white;
  font-family: 楷体;
}
</style>